<template>
  <div class="goodsinfo-container">
     <transition @before-enter = "beforeEnter" @enter = "enter" @after-enter = "afterEnter">
        <div class="ball" v-show = "ballflag" ref="ball"></div>
     </transition>
    <!-- 商品轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner"><swiper :lunbotuList="lunbotu" :isfull = 'false'></swiper></div>
      </div>
    </div>
    <!-- 商品购买 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsInfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p class="price">
                市场价: <del>{{goodsInfo.market_price}}</del>    销售价:<span class = "now_price"> {{goodsInfo.sell_price}}</span>
            </p>
            <p class="buynum"><span>购买数量: </span><numbox @getcount = "getSelectedCount" :max = " goodsInfo.stock_quantity"></numbox></p>
            <p>
                <mt-button type="primary" size = "small">立即购买</mt-button>
                <mt-button type="danger" size = "small" @click="addtoshopcar">加入购物车</mt-button>
            </p>
        </div>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>商品货号:{{goodsInfo.goods_no}}</p>
            <p>库存情况:{{goodsInfo.stock_quantity}}</p>
            <p>上架时间:{{goodsInfo.add_time}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
          <mt-button type="primary" size = "large" plain @click = "goDesc(id)">商品介绍</mt-button>
          <mt-button type="danger" size = "large" plain  @click = "goComment(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/numbox.vue'
export default {
  data () {
    return {
      lunbotu: [],
      id: this.$route.params.id,
      goodsInfo: [],
      //   小球隐藏显示
      ballflag: false,
      //   选中商品数量
      selectedCount: 1
    }
  },
  created () {
    this.getLunBoTu()
    this.getGoodsInfo()
  },
  methods: {
    //   获取轮播图数据
    getLunBoTu () {
      this.$http.get('api/getthumimages/' + this.id).then(result => {
        if (result.body.status === 0) {
          // 循环添加img属性
          result.body.message.forEach(item => {
            item.img = item.src
          })
          this.lunbotu = result.body.message
        }
      })
    },
    getGoodsInfo () {
      // 获取商品信息
      this.$http.get('api/goods/getinfo/' + this.id).then(result => {
        if (result.body.status === 0) {
          this.goodsInfo = result.body.message[0]
        }
      })
    },
    goDesc (id) {
      this.$router.push({ name: 'goodsdesc', params: { id } })
    },
    goComment (id) {
      this.$router.push({ name: 'goodsComment', params: { id } })
    },
    // 加入购物车动画
    addtoshopcar () {
      this.ballflag = !this.ballflag
      //   加入到store中的数据{商品的id ,购买的数量,商品的价值,是否选取}
      // eslint-disable-next-line no-unused-vars
      var goodsinfo = {
        id: this.id,
        count: this.selectedCount,
        price: this.goodsInfo.sell_price,
        // eslint-disable-next-line no-undef
        selected: true

      }
      this.$store.commit('addToCar', goodsinfo)
    },
    beforeEnter (el) {
      el.style.transform = 'translate(0, 0)'
    },
    enter (el, done) {
      //   获取小球在页面的位置
      // eslint-disable-next-line no-unused-vars
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      //   获取徽标在页面的位置
      // eslint-disable-next-line no-unused-vars
      const badgePositon = document.getElementById('badge').getBoundingClientRect()
      // eslint-disable-next-line no-unused-vars
      const xDist = badgePositon.left - ballPosition.left
      // eslint-disable-next-line no-unused-vars
      const yDist = badgePositon.top - ballPosition.top
      // eslint-disable-next-line no-unused-expressions
      el.offsetWidth
      el.style.transform = `translate(${xDist}px, ${yDist}px)`
      el.style.transition = 'all 1s cubic-bezier(.17,.67,.83,.67)'
      done()
    },
    afterEnter (el) {
      this.ballflag = !this.ballflag
    },
    getSelectedCount (count) {
      //   console.log(count)
      this.selectedCount = count
      console.log(this.selectedCount)
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    swiper,
    // eslint-disable-next-line vue/no-unused-components
    numbox
  }
}
</script>
<style lang="css" scoped>
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
}
.now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
}
.buynum{
    display: flex;
    margin-bottom: 15px;
}
.mui-card-content-inner .mint-button{
    margin: 0 5px;
}
.mui-card:last-child{
    margin-bottom: 55px;
}
.mui-card-footer{
    display: block;
}
.mui-card-footer .mint-button{
    margin-bottom: 10px;
}
.ball{
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    top: 384px;
    left: 140px;
}
</style>
